<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">规则设置</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div>
        <el-button
          :type="isColor == 1 ? 'success' : ''"
          class="btnColor"
          @click="changePage(1)"
          >常规设置</el-button
        >
        <el-button :type="isColor == 2 ? 'success' : ''" @click="changePage(2)"
          >活动设置</el-button
        >
      </div>
      <div v-if="isPage === 1" class="isPageDiv">
        <div class="all">
          <div>请设置具体的会员积分规则</div>
          <div><h4>积分设置</h4></div>
          <div class="meihangdiv">
            <span>单日签到可获得</span> <el-input></el-input>
            <span>智学币,连续签到</span>
            <el-input></el-input>
            <span>日, 可获得</span><el-input></el-input><span>智学币</span>
          </div>
          <div class="meihangdiv">
            <span>同步，趣练，答题正确单题可获得</span> <el-input></el-input>
            <span>智学币, 当日最高可获得</span>
            <el-input></el-input>
            <span>智学币, 每正确答题100题量后，获得智学币下调</span
            ><el-input></el-input><span>%(下调比例)</span>
          </div>
          <div class="meihangdiv">
            <span>学生完成作业获得</span> <el-input></el-input>
            <span>智学币</span>
          </div>
          <div class="meihangdiv">
            <span>教师修改作业获得</span> <el-input></el-input>
            <span>智学币</span>
          </div>
          <div class="meihangdiv">
            <span>智源城订单实付 金额满</span> <el-input></el-input>
            <span>元时, 每消费</span>
            <el-input></el-input>
            <span>元, 获得</span><el-input></el-input><span>智学币,</span>
            <span>每笔订单最高获得</span>
            <el-input></el-input><span>智学币.</span>
          </div>
          <div><h4>生效设置</h4></div>
          <div class="meihangdiv">
            <el-radio v-model="radio" label="1"
              >智源城订单购买成功后立即生效</el-radio
            >
            <el-radio v-model="radio" label="2">智源城订单购买成功后</el-radio
            ><el-input> </el-input>
            <span>小时，后生效</span>
            <el-radio v-model="radio" label="3">智源城订单核销成功后</el-radio>
            <el-input> </el-input>
            <span>小时，后生效</span>
          </div>
          <div><h4>到期设置</h4></div>
          <div class="meihangdiv">
            <el-radio v-model="radio" label="1">永久有效</el-radio>
            <el-radio v-model="radio" label="2">每</el-radio
            ><el-date-picker v-model="value1" type="date" placeholder="年月日">
            </el-date-picker>
            <span>清除他所有积分</span>
          </div>
          <div><h4>到期提醒设置</h4></div>
          <div class="meihangdiv">
            <el-radio v-model="radio" label="1">不提醒</el-radio>
            <el-radio v-model="radio" label="2">提醒</el-radio>
          </div>
          <div class="btnFooter">
            <el-button type="success">保存</el-button>
            <el-button>取消</el-button>
          </div>
        </div>
      </div>
      <div v-if="isPage === 2" class="isPageDiv">
        <div class="searchForm">
          <el-form :model="searchFormHQ" inline class="chazhaodiv">
            <el-form-item label="活动名称">
              <el-input
                v-model="searchFormHQ.huodongName"
                placeholder="活动名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker
                v-model="searchFormHQ.huodongtime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动端口">
              <el-select v-model="searchFormHQ.huodongDK">
                <el-option label="8080" value="8080"></el-option>
                <el-option label="3000" value="8080"></el-option>
                <el-option label="3000" value="8080"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动类型">
              <el-select v-model="searchFormHQ.huodongtype">
                <el-option label="打折扣" value="1"></el-option>
                <el-option label="打骨折" value="2"></el-option>
                <el-option label="赔本买卖" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="quanxuanDiv">
          <div class="btnDIVfenlei1">
            <el-checkbox>当页全选</el-checkbox>
            <el-button class="xiajiabtn">删除</el-button>
          </div>
          <div class="btnDIVfenlei">
            <el-button type="success">添加活动</el-button>
          </div>
        </div>
        <div class="tableDIV">
          <el-table :data="goodsTableData" border>
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column label="活动编号" align="center" prop="goodsName">
            </el-table-column>
            <el-table-column label="活动类型" align="center" prop="goodsName">
            </el-table-column>
            <el-table-column label="活动名称" align="center" prop="goodsName">
            </el-table-column>
            <el-table-column label="有效时间" align="center" prop="goodsName">
            </el-table-column>
            <el-table-column label="活动端口" align="center" prop="goodsName">
            </el-table-column>
            <el-table-column label="活动状态" align="center" prop="goodsName">
            </el-table-column>
            <el-table-column label="操作" align="center" width="250px">
              <template>
                <el-button class="el-icon-edit" type="info">保存</el-button>
                <el-button class="el-icon-delete" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="1"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchFormHQ: {
        huodongName: "",
        huodongtime: "",
        huodongDK: "",
        huodongtype: ""
      },
      radio: "",
      isColor: 1,
      isPage: 1,
      changguishezhiForm: {},
      goodsTableData: []
    };
  },
  created() {},
  methods: {
    changePage(n) {
      this.isPage = n;
      this.isColor = n;
    }
  }
};
</script>

<style lang="scss" scoped>
.all {
  font-size: 14px;
  margin: 16px 0 20px 16px;
  div {
    margin-bottom: 10px;
  }
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 120px;
  margin: 0 10px 48px 10px;
}
.meihangdiv {
  display: flex;
  span {
    margin-top: 10px;
  }
}
.el-radio {
  margin-top: 12px;
  color: #606266;
  margin-left: 20px;
  margin-right: 0 !important;
}

.btnFooter {
  margin: 30px;
}
.tableDIV {
  margin: 20px 0 0 0;
}
.isPageDiv {
  margin: 20px 20px 0 0px;
  .xiajiabtn {
    margin-left: 20px;
  }
  .quanxuanDiv {
    display: flex;
    margin-top: 20px;
    .btnDIVfenlei1 {
      width: 50%;
    }
  }
  .btnDIVfenlei {
    width: 50%;
    display: flex;
    justify-content: flex-end;
  }
}
.bannerDiv {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchForm {
  background-color: #f2f2f2;
  .chazhaodiv {
    padding: 20px 0 0 20px;
    height: 62px;
  }
}
.el-pagination {
  margin: 20px 30%;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}
.el-pagination {
  margin: 20px !important;
}
</style>
